<template>
  <div class="MedicineDetail">
    <van-nav-bar :title="`${medicineName || '药品'} 详情`" left-text="返回" left-arrow @click-left="router.back()" />
    <div class="medicine-info">
      <van-cell-group>
        <div class="title">
          <h1>{{ medicine.name }}</h1>
          <van-tag type="primary">{{ medicine.type }}</van-tag>
          <span class="unit">({{ medicine.unit }})</span>
        </div>
        <div class="info">
          <span>有效期：{{`${medicine.validity}天`}}</span>
          <span>数量：{{`${medicine.quantity}${medicine.unit}`}}</span>
        </div>
        <van-cell>
          <template #title>
            <span>推荐用法：</span>
            <span style="color: red;">一天 {{ medicine.recommendation.day }} 次，每次 {{ medicine.recommendation.amount }} {{ medicine.unit }}</span>
          </template>
        </van-cell>
        <van-cell v-if="(medicine?.usingInfo?.afterTime||0) > 0 || (medicine?.usingInfo?.beforeTime||0) > 0">
          <template #title>
            <span style="color: red;">注意事项：</span>
            <span title="用药信息">
              <template v-if="(medicine?.usingInfo?.beforeTime||0) > 0">
                用药前 {{ medicine?.usingInfo?.beforeTime||0 }} 分钟，
              </template>
              <template v-if="(medicine?.usingInfo?.afterTime||0) > 0">
                用药后 {{ medicine?.usingInfo?.afterTime||0 }} 分钟，
              </template>
              <template v-if="(medicine?.usingInfo?.afterTime||0) > 0 || (medicine?.usingInfo?.beforeTime||0) > 0">
                不能吃任何药
              </template>
            </span>
          </template>
        </van-cell>
        <van-cell>
          <template #title>
            <van-text-ellipsis :content="medicine.details" expand-text="展开" collapse-text=" 收起" />
          </template>
        </van-cell>
      </van-cell-group>
    </div>
    <div class="medicine-list">
      <van-cell-group>
        <van-cell title="库存列表" />
        <van-cell v-for="item,index in medicineList" :key="item.id">
          <template #title>
            <div class="info">
              <span class="num">{{ index+1 }}</span>
              <div class="title">
                <span>购置时间：{{ item.time }}</span>
                <span :style="item.expired?`color: red`:``">有效期至：{{ item.validity }}</span>
              </div>
              <span v-if="item.expired" style="color: red;" class="quantity">已过期</span>
              <span v-else class="quantity">剩余: {{ item.quantity }}</span>
            </div>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const medicineId = router.currentRoute.value.params?.id as string
const medicineName = ref<string>('莲花清瘟颗粒')
const medicine = ref({
  id: '1',
  name: '莲花清瘟颗粒',
  validity: 31,
  type: '中药',
  quantity: 10,
  unit: '袋',
  details: '用于治疗流行性感冒用于治疗流行性感冒用于治疗流行性感冒用于治疗流行性感冒用于治疗流行性感冒用于治疗流行性感冒用于治疗流行性感冒用于治疗流行性感冒',
  usingInfo: { beforeTime: 1, afterTime: 0 },
  recommendation: { day: 3, amount: 2 } // 每天三次，每次两粒
})
medicineId;
// 库存列表
// 购置时间，生产日期，有效期至，剩余量, 过期提醒， 是否过期
const medicineList = ref([
  { id: '1', time: '2023-10-01', validity: '2023-11-01', quantity: 10, expired: false },
  { id: '2', time: '2023-10-02', validity: '2023-11-02', quantity: 5, expired: false },
  { id: '3', time: '2023-10-03', validity: '2023-11-03', quantity: 0, expired: true }
])

onMounted(async () => {
})

</script>

<style scoped>
.medicine-info {
  margin: 10px 0;
  padding: 10px;
  border-radius: 5px;
  border-bottom: 1px solid #ddd;
}
.medicine-info .title {
  display: flex;
  justify-content: left;
  align-items: center;
}
.medicine-info .title h1 {
  font-size: 20px;
  font-weight: bold;
  margin: 0;
  margin-right: 10px;
}
.medicine-info .title span.unit {
  margin-left: 10px;
  font-size: 14px;
  color: #666;
}
.medicine-info .info {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 10px 0;
}
.medicine-info .info span {
  font-size: 14px;
  color: #666;
}
.medicine-info .van-cell {
  padding-top: 2px;
  padding-bottom: 2px;
}
.medicine-info .van-cell .van-cell__title {
  margin-bottom: 0;
}
.medicine-list .num {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  background-color: #f56c6c;
  color: #fff;
  margin-right: 10px;
}
.medicine-list .info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.medicine-list .info .title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.medicine-list .info .title span {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}
.medicine-list .info .quantity {
  font-size: 16px;
  font-weight: bold;
}
</style>
